<template>
    <div>
        <h2>{{ $t('user.preferences.editor.title') }}</h2>
        <el-form label-position="left" label-width="25%" v-loading="loading">
            <el-form-item :label="$t('user.preferences.editor.editor')">
                <template #label>
                    {{ $t('user.preferences.editor.editor') }}
                    <el-tooltip class="box-item" effect="dark" placement="right">
                        <el-icon size="16" color="#1C77C3"><QuestionFilled /></el-icon>
                        <template #content>
                            <p>{{ $t('user.preferences.editor.tip_html') }}</p>
                            <p>{{ $t('user.preferences.editor.tip_text') }}</p>
                            <p>{{ $t('user.preferences.editor.tip_list') }}</p>
                        </template>
                    </el-tooltip>
                </template>
                <el-select v-model="form">
                    <el-option :label="$t('user.preferences.editor.default')" value="0" />
                    <!-- <el-option :label="$t('user.preferences.editor.atto')" value="atto" /> -->
                    <el-option :label="$t('user.preferences.editor.tinymce')" value="tinymce" />
                    <el-option :label="$t('user.preferences.editor.textarea')" value="textarea" />
                </el-select>
            </el-form-item>
            <div class="btn-list">
                <el-button @click="submitHandle" color="#F06423">{{ $t('golbal.btn_text_1') }}</el-button>
                <el-button @click="cancleHandle" color="#F06423">{{ $t('golbal.btn_text_3') }}</el-button>
            </div>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router'

import { useUserStore } from '@/stores/user'
import UserService from '@/api/user'
import type { EditorPreference } from '@/types/user'

const key = 'editor_preferences'
const router = useRouter()
const userStore = useUserStore()
const loading = ref(false)

const form = ref('0')
const submitHandle = () => {
    loading.value = true
    if (!userStore.userinfoL) return
    UserService.preferenceUpdate(userStore.userinfoL.id, key, form.value).finally(() => {
        loading.value = false
    })
}
const cancleHandle = () => {
    router.go(-1)
}
function getCalendarPreference() {
    if (!userStore.userinfoL) return
    loading.value = true
    UserService.preferenceByKey<EditorPreference>(userStore.userinfoL.id, key)
        .then(res => {
            form.value = res.value
        })
        .finally(() => {
            loading.value = false
        })
}

watch(
    () => userStore.userinfoL,
    () => {
        getCalendarPreference()
    },
)

onMounted(() => {
    getCalendarPreference()
})
</script>

<style lang="less" scoped>
h2 {
    margin-bottom: 30px;
    font-size: 30px;
    font-weight: normal;
    line-height: 1.2;
    color: #000;
}

:deep(.el-form) {
    .el-form-item {
        .el-form-item__label {
            align-items: center;
            justify-content: space-between;

            color: #4c4c4c;
            line-height: 1.2;
        }
    }

    .btn-list {
        display: flex;
        justify-content: center;
    }
}
</style>
